import './index.scss';
import React, { Component } from 'react';
import AppWakeup from 'components/AppWake';
import services from 'services';
import qs from 'qs';
import 'video.js/dist/video-js.css';
import wxjssdk from 'libs/wxjssdk';
import { isWechat } from 'libs/tools';

class Page extends Component {
	state = {
		params:{
			from_origin:'',
			cid:''
		}
	}

	componentWillUnmount() {
		// this.shareTimer && clearInterval(this.shareTimer);

	}

	componentDidMount() {
			setTimeout(function () {
				let bgAudio = document.getElementById('my-video');
				console.log(bgAudio )
				if(bgAudio){
					bgAudio.addEventListener("click", function () {
						console.log('click')
						bgAudio.load();
						bgAudio.play();
					}, false);
				}
				// 兼容在微信里自动播放
			},1000)

		let params = qs.parse(location.href.split('?')[1]);
		this.setState({
			params:params
		});
		if(params.from_origin == 'mainpage'){
			services.App.getContentDetail(params.cid).then(res => {
				let { data, code } = res.data;
				data.type = 1;
				if (code == 0) {
					this.setState(
						{ article: data },
						() => {
							if (data.type == 2) {
								// this.player = videojs(document.querySelector('.video-js'), this.props, function onPlayerReady() {
								// });
							}
						}
					);
					console.log('isWechat()',location)
					if(isWechat()){
						wxjssdk.initShare(
							location.href,
							data.title,
							data.intro,
							data.img,
							params.from_origin,
							params.cid
						);
						let head = document.getElementsByTagName('head');
						let meta = document.createElement('meta');
						let meta2 = document.createElement('meta');
						meta.content = data.title;
						meta.name = 'keywords';
						meta2.content = data.intro;
						meta2.name = 'description';
						head[0].appendChild(meta);
						head[0].appendChild(meta2)
					}
				}
				else {
					this.setState({
						notFound: code != 0
					});
				}
			});
		}else{
			services.App.getShare(params.cid).then(res => {
				// services.App.getContentDetail(18).then(res => {
				let { data, code } = res.data;
				if (code == 0) {
					this.setState(
						{ article: data },
						() => {
							if (data.type == 2) {
								// this.player = videojs(document.querySelector('.video-js'), this.props, function onPlayerReady() {
								// });
							}
						}
					);
					if(isWechat()){

						wxjssdk.initShare(
							location.href,
							data.title,
							data.intro,
							data.img,
							params.from_origin,
							params.cid
						);
						let head = document.getElementsByTagName('head');
						let meta = document.createElement('meta');
						let meta2 = document.createElement('meta');
						meta.content = data.title;
						meta.name = 'keywords';
						meta2.content = data.intro;
						meta2.name = 'description';
						head[0].appendChild(meta);
						head[0].appendChild(meta2)
					}
				}
				else {
					this.setState({
						notFound: code != 0
					});
				}
			});
		}
	}

	componentWillUnmount() {
		this.player && this.player.dispose();
	}

	render() {
		let { article, notFound,params } = this.state;
		return (
			<div className="page-article">
				{
					article &&
					<React.Fragment>
						<div className="article-hd">
							{
								Number(article.type) == 2  &&  <div className="article-intro-image">
									<img src={article.img} />
								</div>
							}

						</div>

						<div className="article-bd">


							{
								Number(article.type) == 1 &&
								<div className="article-content" dangerouslySetInnerHTML={{ __html: article.content }}></div>
							}
							{
								Number(article.type) == 2 &&
								<div className="article-video">
									<audio id='my-video' className='audio-js' src={article.audio} controls preload='auto' data-setup='{}'>
									</audio>
									{
										params.from_origin == 'mainpage' || <div>
											<h1 className="article-title">{article.title}</h1>
											<div className="article-meta">
												<p>{article.updatetime}</p>
												<p className="count">{article.readcount}</p>
											</div>
										</div>
									}
									<div className="article-content" dangerouslySetInnerHTML={{ __html: article.content }}></div>
								</div>
							}
							{
								Number(article.type) == 3 &&
								<div className="article-video">
									<video id='my-video' className='video-js' controls preload='auto' data-setup='{}'>
										<source  src={article.video} type="video/mp4"/>
									</video>
									{
										params.from_origin == 'mainpage' || <div>
											<h1 className="article-title">{article.title}</h1>
											<div className="article-meta">
												<p>{article.updatetime}</p>
												<p className="count">{article.readcount}</p>
											</div>
										</div>
									}
									<div className="article-content" dangerouslySetInnerHTML={{ __html: article.content }}></div>
								</div>
							}
						</div>

						<AppWakeup path={`/share/${params.cid}`} action={`Open_${params.from_origin}`} from_origin={params.from_origin} type={article.type}  cid={params.cid}/>
					</React.Fragment>
				}
				{
					notFound && '哦..sorry..文章飘去其他星球了...'
				}
			</div>
		);
	}
}

export default Page;